<template>
  <view class="page">
    <z-paging ref="paging" v-model="goodsList" @query="queryList">
      <custom-navbar title="首页" :showBack="false"> </custom-navbar>

      <view class="u-demo-block">
        <up-swiper
          :list="swiperList"
          previousMargin="30"
          nextMargin="30"
          circular
          :autoplay="false"
          radius="5"
          bgColor="#ffffff"
        ></up-swiper>
      </view>
      <view class="padding-default">
        <!-- 商品区域 -->
        <view class="goods-list">
          <view
            class="goods-item df mb20"
            v-for="item in goodsList"
            :key="item.id"
          >
            <up-image
              :show-loading="true"
              :src="item.pictUrl"
              width="200rpx"
              height="200rpx"
              radius="10"
            ></up-image>
            <view class="goods-item-info ml20 df-jsb fd-c">
              <text class="title txt-cut">{{ item.goodsName }}</text>
              <text class="price color-theme">￥{{ item.minPrice }}</text>
            </view>
          </view>
        </view>
      </view>

      <view class="footer-box">
        <up-tabbar
          :value="value1"
          @change="change1"
          :fixed="false"
          :placeholder="false"
          :safeAreaInsetBottom="false"
        >
          <up-tabbar-item
            text="首页"
            icon="home"
            @click="click1"
          ></up-tabbar-item>
          <up-tabbar-item
            text="放映厅"
            icon="photo"
            @click="click1"
          ></up-tabbar-item>
          <up-tabbar-item
            text="直播"
            icon="play-right"
            @click="click1"
          ></up-tabbar-item>
          <up-tabbar-item
            text="我的"
            icon="account"
            @click="click1"
          ></up-tabbar-item>
        </up-tabbar>
      </view>
    </z-paging>
  </view>
</template>

<script setup lang="ts">
import { onLoad } from "@dcloudio/uni-app";
import { ref } from "vue";
import { goodsListApi } from "@/api/index.js";
import swiper3 from "@/static/images/swiper3.png";
import swiper2 from "@/static/images/swiper2.png";
import swiper1 from "@/static/images/swiper1.png";
const show = ref();

// swiper
const swiperList = ref([swiper3, swiper2, swiper1]);

const value1 = ref(0);
function click1(e) {
  console.log(e);
}
function change1(e) {
  console.log(e);
}
const goodsList = ref([]);
const paging = ref(null);
// async function getGoodsList() {
//   const params = {
//     currentPage: 1,
//     pageSize: 10,
//   };
//   const res = await goodsListApi(params);
//   goodsList.value = res.records;
// }
// @query所绑定的方法不要自己调用！！需要刷新列表数据时，只需要调用paging.value.reload()即可
const queryList = (pageNo, pageSize) => {
  const params = {
    currentPage: pageNo,
    pageSize: pageSize,
  };
  goodsListApi(params)
    .then((res) => {
      paging.value.complete(res.records);
    })
    .catch((res) => {
      paging.value.complete(false);
    });
};
onLoad(() => {
  // getGoodsList();
});
</script>

<style lang="scss" scoped>
.page {
  padding-top: calc(var(--status-bar-height) + 44px);
}
.goods-list {
  .goods-item {
    height: 200rpx;
  }
  .goods-item-info {
    height: 100%;
  }
}
.footer-box {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
}
</style>
